<template>
<div id="app">
 <div class="header">
            <h1>学生社交媒体成瘾分析报告</h1>
            <p>基于跨国调查数据的综合分析</p>
        </div>
             <div class="section">
            <h2>研究概述</h2>
            <div class="summary">
                <p>本研究基于对16-25岁学生的社交媒体使用行为调查，涵盖多个国家和地区的学生群体。研究重点关注社交媒体使用对学生学习、心理健康和社交关系的影响。</p>
            </div>
            <div class="key-findings">
                <h3>主要发现</h3>
                <div id="keyFindings">
                    <li>平均每日社交媒体使用时长：4.4小时</li>
                    <li>平均心理健康评分：6.4/10</li>
                    <li>平均睡眠时间：6.5小时</li>
                    <li>学业影响：NaN%的学生报告社交媒体对学习有负面影响</li>
                </div>
            </div>
        </div>
</div>
</template>

<script>
export default{
name:'ResearchReport',
}
</script>
<style scoped>
 .section {
            background: white;
            border-radius: 35px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                        margin-left: 15px;
            margin-right: 15px;
        }
        
        .section h2 {
            color: #4a90e2;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border-color);
        }
        .key-findings{
            color: #2c3e50;
        }
.all{
    flex-direction: column;
    width: 100px;
    width: 100px;

}
    .header {
            text-align: center;
            padding: 30px 0;
            background: white;
            border-radius: 35px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            margin-left: 15px;
            margin-right: 15px;
        }
        
        .header h1 {
            color:#4a90e2;
            margin: 0;
        }
        
        .header p {
            color: #666;
            margin: 10px 0 0;
        }
        
</style>